<template>
	<view class="login-bg">
		<view class="bg2">
			<view style="width: 100%;display: flex;padding-top: 10%;height: 50rpx;">
				<image src="../../static/dui.png" class="dui"></image>
				<view class="dui_text">累计成交量 <text style="font-size: 48rpx;">{{cj_number}}</text> </view>
			</view>
		</view>
		
		<view class="t-box">
			<view style="font-weight: 700;margin-bottom: 20rpx;">第二步</view>
			<view class="kuang">
				<view class="k_left bold">区服信息</view>
			</view>
			<view class="kuang">
				<view class="k_left">区服</view>
				<view class="k_right">
					<view style="width: 90%;">{{game}} {{device}}</view>
				</view>
			</view>
		</view>
		
		<view class="t-box" style="margin-top: 50rpx;">
			<view class="kuang" style="margin-top: 0rpx;">
				<view class="k_left bold" style="width: 100%;">账号信息 <text style="color: #999;font-size: 24rpx;">（*为必填项）</text></view>
			</view>
			<view class="kuang">
				<view class="k_left">
					<view>价格</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;" >*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入价格" v-model="param.price" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号名称</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入主号名称" v-model="param.name" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号等级</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入主号等级" v-model="param.level" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号性别</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;">
						<picker :range="['请选择性别','男','女']" @change="change_sex">
							<view>{{param.sex}}</view>
							<!-- <input v-model="param.sex" disabled="true" style="background-color: transparent;" /> -->
						</picker>
					</view>
					<image src="../../static/jiantou.png" class="jiantou"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号职业</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;">
						<picker :range="zhiye" @change="change_zhiye">
							<view>{{param.zhiye}}</view>
						</picker>
					</view>
					
					<image src="../../static/jiantou.png" class="jiantou"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号技能</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入主号技能" v-model="param.jineng" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang">
				<view class="k_left">
					<view>主号装备</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;">*</view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入主号装备" v-model="param.zhuangbei" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="kuang">
				<view class="k_left">
					<view>声望</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入声望" v-model="param.shengwang" @focus="focus" @blur="blur"/></view>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="kuang">
				<view class="k_left">
					<view>充值封号</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入充值封号" v-model="param.czfh" @focus="focus" @blur="blur"/></view>
				</view>
			</view>
			<view class="line"></view>
			
			<view class="kuang" v-show="device_info.is_person_name=='是'">
				<view class="k_left">
					<view>英雄名称</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入英雄名称" v-model="param.person_name" @focus="focus" @blur="blur"/></view>
				</view>
			</view>
			<view class="line" v-show="device_info.is_person_name=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_person_name=='是'">
				<view class="k_left">
					<view>英雄等级</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入英雄等级" v-model="param.person_level" @focus="focus" @blur="blur"/></view>
				</view>
			</view>
			<view class="line" v-show="device_info.is_person_name=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_person_name=='是'">
				<view class="k_left">
					<view>英雄职业</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;">
						<picker :range="zhiye" @change="change_zhiye2">
							<view>{{param.person_zhiye}}</view>
						</picker>
					</view>
					<image src="../../static/jiantou.png" class="jiantou"></image>
				</view>
			</view>
			<view class="line" v-show="device_info.is_person_name=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_person_name=='是'">
				<view class="k_left">
					<view>英雄技能</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入英雄技能" v-model="param.person_jineng" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line" v-show="device_info.is_person_name=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_person_name=='是'">
				<view class="k_left">
					<view>英雄装备</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入英雄装备" v-model="param.person_zhuangbei" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="line" v-show="device_info.is_person_name=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_jinling=='是'">
				<view class="k_left">
					<view>金令到期时间</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input type="date"  v-model="param.create_at" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			
			<view class="line" v-show="device_info.is_jinling=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_lt=='是'">
				<view class="k_left">
					<view>是否绿通</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;">
						<picker :range="['请选择是否绿通','是','否']" @change="change_lv">
							<view>{{param.is_lv}}</view>
						</picker>
					</view>
					<image src="../../static/jiantou.png" class="jiantou"></image>
					
				</view>
			</view>
			
			<view class="line" v-show="device_info.is_lt=='是'"></view>
			
			<view class="kuang" v-show="device_info.is_zhizun=='是'">
				<view class="k_left">
					<view>是否至尊通行证</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;">
						<picker :range="['请选择是否至尊通行证','是','否']" @change="change_tx">
							<view>{{param.is_tx}}</view>
						</picker>
					</view>
					<image src="../../static/jiantou.png" class="jiantou"></image>
					
				</view>
			</view>
			<view class="line" v-show="device_info.is_zhizun=='是'"></view>
			
			<view class="kuang">
				<view class="k_left">
					<view>补充描述</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kuang" style="margin-top: 20rpx;height: 100rpx;">
				<view class="k_left" style="width: 100%;margin-top: 0rpx;">
					<textarea v-model="param.desc" placeholder="请输入补充信息" style="width: 90%;height: 100rpx; opacity: 0.5; font-size: 28rpx;" @focus="focus" @blur="blur"></textarea>
				</view>
			</view>
		</view>
		
		<view class="t-box" style="margin-top: 50rpx;">
			<view class="kuang" style="margin-top: 0rpx;">
				<view class="k_left bold" style="width: 100%;">联系方式 </view>
			</view>
			<view class="kuang">
				<view class="k_left">
					<view>手机号</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入手机号" v-model="phone" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
			<view class="kuang">
				<view class="k_left">
					<view>微信号</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
				</view>
				<view class="k_right">
					<view style="width: 90%;"><input placeholder="请输入微信号" v-model="weixin" @focus="focus" @blur="blur" /></view>
				</view>
			</view>
		</view>
		
		<view style="font-size: 24rpx;color: #ccc;width: 100%;margin-top:50rpx;text-align: center;display: flex;justify-content: center;">
			<view>
				<checkbox-group @change="handleCheckboxChange">
					<checkbox :value="'1'" color="#007aff" >我同意《发布条款》,保证信息合法合规</checkbox>
				</checkbox-group>
			</view>
		</view>
		
		<view style="height: 300rpx;"></view>
		
		<view class="footer" :style="{top:regLocation}" v-if="show==true">
			<view class="btn" @click="sub">下一步</view>
		</view>
		
		<view class="zhezhao" @click="sub_false" v-if="is_sub==true"></view>
		<view class="piliang" v-if="is_sub==true">
			<view class="top" style="border-radius: 30rpx;">
				<image mode="widthFix" src="../../static/top.png" style="width: 100%;border-radius: 30rpx;"></image>
			</view>
			<view class="top_text">发布成功~</view>
			<view class="top_text2">您可以在【我的-我的发布】中查看或修改信息</view>
			<view class="btn_text" style="display: flex;width: 100%;margin-left: 0%;">
				<view @click="home" class="btn2" style="background-color:#fff;color:#000;text-align: center;border:1px solid #ccc;margin-left: 18%;margin-right: 2%;">
				  返回首页
				</view>
				<view @click="fabu" class="btn2" style="margin-left: 2%;text-align: center;">
				  继续发布
				</view>
			</view>
		</view>
		
		
	</view>
</template>



<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	import Radio from '../components/Radio.vue';
	
	export default {
	    components: {
			CustomTabBar,Radio
	    },
		
	    data() {
	        return {
				currentTab: 2, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				
				game:'',
				device:'',
				device_info:{},
				
				cj_number:0,
				phone:'',
				weixin:'',
				
				regLocation:'',
				
				is_sub:false,
				zhiye:[],
				item:{},
				show:true,
				
				selected: '0',
				param:{
					price:'',name:'',sex:'请选择性别',zhiye:"请选择职业",jineng:'',level:'',
					zhuangbei:'',shengwang:'',czfh:'',person_level:'',person_name:'',
					person_zhiye:'请选择职业',person_jineng:'',person_zhuangbei:'',create_at:'',is_lv:'请选择是否绿通',
					is_tx:'请选择是否至尊通行证',desc:''
				}
			}
		},
		onLoad(options) {
			this.cj_count()
			if(options){
				var item = JSON.parse(options.item)
				if(item){
					this.item = item
					this.game=item.game
					this.device=item.device
					this.phone=item.phone
					this.weixin=item.weixin
					this.param.price = item.price
					this.param.name = item.name
					this.param.level = item.level
					this.param.sex = item.sex
					this.param.zhiye = item.zhiye
					this.param.jineng = item.jineng
					this.param.zhuangbei = item.zhuangbei
					this.param.shengwang = item.shengwang
					this.param.czfh = item.czfh
					this.param.person_name = item.person_name
					this.param.person_level = item.person_level
					this.param.person_zhiye = item.person_zhiye
					this.param.person_jineng = item.person_jineng
					this.param.person_zhuangbei = item.person_zhuangbei
					this.param.create_at = item.create_at
					this.param.is_lv = item.is_lv
					this.param.is_tx = item.is_tx
					this.param.desc = item.desc
					
					
					var that = this
					uni.request({
						url:getApp().globalData.host+'srapi/home/device_info',
						method:'POST',
						header: { // 设置请求的header
							'content-type': 'application/json' // 默认值
						},
						data:{
							device:that.device,game:that.game
						},
						success: (res) => {
							that.device_info = res.data.data
							console.log(that.device_info)
						}
					})
					
				}
				
				
				this.game_zhiye()
			}
		},
		onReady() {
		    const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
			console.log(windowHeight)
			this.regLocation = windowHeight-80+ 'px'
			console.log(this.regLocation)
		},
		methods: {
			focus(){
				//this.show = false
			},
			blur(){
				this.show = true
			},
			change_lv(e){
				var arr = ['请选择是否绿通','是','否']
				this.param.is_lv = arr[e.detail.value]
			},
			change_tx(e){
				var arr = ['请选择是否至尊通行证','是','否']
				this.param.is_tx = arr[e.detail.value]
			},
			change_sex(e){
				var sex_arr = ['请选择性别','男','女']
				this.param.sex = sex_arr[e.detail.value]
			},
			change_zhiye(e){
				var zhiye = this.zhiye
				this.param.zhiye = zhiye[e.detail.value]
			},
			change_zhiye2(e){
				var zhiye = this.zhiye
				this.param.person_zhiye = zhiye[e.detail.value]
			},
			cj_count(){
				 var that = this
				 uni.request({
					url:getApp().globalData.host+'srapi/home/cj_count',
					method:'POST',
					data: { // 请求的参数
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.cj_number = res.data.data
					}
				})
			},
			sub_true(){
				this.is_sub=true
			},
			sub_false(){
				this.is_sub=false
			},
			handleCheckboxChange(event) {
				if(event.detail.value.length==0){
					this.selected = '0'
				}else{
					this.selected = '1'
				}
			},
			home(){
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			fabu(){
				uni.redirectTo({
					url:'/pages/index/add'
				})
			},
			sub(){
				var that = this
				
				if(!uni.getStorageSync('member')){
					 uni.showToast({ title: '请登录！', icon: 'none' });
					 setTimeout(function(){
						 uni.navigateTo({
							url:'/pages/my/login'
						 })
					 },2000)
				}
				if(this.param.price==''){
					uni.showToast({ title: '请输入价格！', icon: 'none' }); return;
				}
				if(this.param.name==''){
					uni.showToast({ title: '请输入主号名称！', icon: 'none' }); return;
				}
				if(this.param.level==''){
					uni.showToast({ title: '请输入主号等级！', icon: 'none' }); return;
				}
				if(this.param.sex=='请选择性别'){
					uni.showToast({ title: '请选择性别！', icon: 'none' }); return;
				}
				if(this.param.zhiye=='请选择职业'){
					uni.showToast({ title: '请选择职业！', icon: 'none' }); return;
				}
				if(this.param.jineng==''){
					uni.showToast({ title: '请输入技能！', icon: 'none' }); return;
				}
				if(this.param.zhuangbei==''){
					uni.showToast({ title: '请输入装备！', icon: 'none' }); return;
				}
				if(this.selected=='0'){
					uni.showToast({ title: '请同意并勾选发布条款！', icon: 'none' }); return;
					
				}
				
				var that = this
				var member = uni.getStorageSync('member')
				uni.request({
					url:getApp().globalData.host+'srapi/home/save_fabu',
					method:'POST',
					data: { // 请求的参数
						id:that.item.id,
						member_phone:member.phone,
						game:that.game,device:that.device,
						price:that.param.price,name:that.param.name,
						sex:that.param.sex,zhiye:that.param.zhiye,jineng:that.param.jineng,
						level:that.param.level,
						zhuangbei:that.param.zhuangbei,shengwang:that.param.shengwang,
						czfh:that.param.czfh,person_level:that.param.person_level,person_name:that.param.person_name,
						person_zhiye:that.param.person_zhiye,person_jineng:that.param.person_jineng,person_zhuangbei:that.param.person_zhuangbei,create_at:that.param.create_at,is_lv:that.param.is_lv,
						is_tx:that.param.is_tx,desc:that.param.desc,
						phone:that.phone,weixin:that.weixin
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						that.sub_true()
					}
				})
				
			},
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  

			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			 
			 game_zhiye(){
				 var that = this
				 uni.request({
				 	url:getApp().globalData.host+'srapi/home/game_zhiye',
				 	method:'POST',
				 	data: { // 请求的参数
				 		game:that.game
				 	},
				 	header: { // 设置请求的header
				 		'content-type': 'application/json' // 默认值
				 	},
				 	success: (res) => {
				 		that.zhiye = res.data.data
						console.log(that.zhiye)
				 	}
				 })
			 }
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 140rpx;
		}
		.uni-checkbox-input {
			width: 15px !important;height: 15px !important;
		}
		input{
			font-size: 28rpx;
		}
		.login-bg {
			background-color: #f8f8f8;
		}
		.bg2{
			height: 276rpx;
			width: 100%;
			background-size: 100% 100%;
			background-image: url(../../static/fabu.png);
		}
		.dui{
			width: 36rpx;
			height: 36rpx;
			margin-top: 18rpx;
			margin-left: 5%;
		}
		.dui_text{
			color: #fff;line-height: 50rpx;
		}
		
		.t-box{
			width: 640rpx;
			padding: 35rpx;
			margin: 0 auto;
			margin-top: -5vh;
			font-size: 28rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
			z-index: 9;
		}
		.footer{
			width: 100%;
			height: 120rpx;
			position: fixed;
			background-color: #fff;
			border: 0px;
			bottom: 10rpx ;
			left: 0%;
		}
		.bold{
			font-weight: 700;
		}
		.btn{
			width: 700rpx;
			z-index: 99;
			border-radius: 20rpx;
			background-color: #609DF6;
			color: #fff;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			margin: auto;
			margin-top: 20rpx;
		}
		.kuang{
			width: 100%;display: flex;margin-top: 40rpx;height: 40rpx;
		}
		.line{
			width: 110%;
			border-bottom: 1px #eee solid;
			margin-left: -5%;
			margin-top: 30rpx;
		}
		.k_left{
			width: 40%;
			padding-left: 2%;
			text-align: left;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
		}
		.k_left view{
			height: 40rpx;
			line-height: 40rpx;
		}
		.k_right{
			width: 56%;
			padding-right: 2%;
			text-align: right;
			color: #999;
			height: 40rpx;
			line-height: 40rpx;
			display: flex;
		}
		.k_right view{
			height: 40rpx;
			line-height: 40rpx;
		}
		.jiantou{
			width: 20rpx;
			height: 20rpx;
			margin-top: 10rpx;
			margin-left: 5rpx;
		}
		
		
		.zhezhao{
		  width: 100%;height: 100%; position: fixed; top: 0%; left: 0%; background-color: #000; opacity: 0.8;z-index: 100;
		}
		
		.piliang{
			z-index: 101;
		  width: 80%;
		  height: 700rpx;
		  background-color:#fff;
		  border-radius: 32rpx;
		  left: 10%;
		  top: 250rpx;
		  position: fixed;
		}
		.top{
			width: 100%;
			height: 150rpx;
		}
		.top_text{
		  width: 100%;font-size: 50rpx;text-align: center;color:#336CFE;font-weight: 700;left: 0%;
		  top: 550rpx;
		  position: fixed;
		}
		.top_text2{
			width: 100%;font-size: 24rpx;text-align: center;color:#2A2C32;font-weight: 500;left: 0%;
			top: 650rpx;
			position: fixed;
		}
		.btn_text{
			width: 100%;font-size: 24rpx;text-align: center;left: 0%;
			top: 750rpx;
			position: fixed;
		}
		.btn2{
			z-index: 101;
		  background: #3475f3;
		  border-radius: 29rpx;
		  width: 30%;
		  height: 72rpx;
		  margin: auto;
		  margin-top: 30rpx;
		  color: #fff;
		  line-height: 72rpx;
		  font-size: 24rpx;
		  text-align: center;
		}
</style>